<template>
  <view>
    <view class="language" @tap="show = true">
      {{ languageObj?.label }}
      <image src="@/static/image/11.png" mode="widthFix" />
    </view>
    <up-picker
      :show="show"
      :closeOnClickOverlay="true"
      :defaultIndex="[languageObj.index]"
      :columns="columns"
      keyName="label"
      @close="show = false"
      @cancel="show = true"
      @confirm="confirm"
    ></up-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const show = ref<boolean>(false);
const languageObj = ref<any>();
const columns = reactive([
  [
    {
      label: "繁体",
      code: "zh-TW",
      index: 0,
    },
    {
      label: "英文",
      code: "en-US",
      index: 1,
    },
    {
      label: "印尼",
      code: "id",
      index: 2,
    },
  ],
]);
if (uni.getStorageSync("languageObj")) {
  languageObj.value = uni.getStorageSync("languageObj");
} else {
  languageObj.value = columns[0][0];
}
const confirm = (e: any) => {
  uni.setStorageSync("languageObj", e.value[0]);
  languageObj.value = e.value[0];
  show.value = false;
};
</script>
